<template>
  <div>
    <div class="breadcrumb clearfix">
      <div class="float-left">
        <span>{{breadcrumb.leaveOne}}</span>
        <span v-if="breadcrumb.leaveTwo">&gt;&nbsp;{{breadcrumb.leaveTwo}}</span>
        <span v-if="breadcrumb.leaveThree">&gt;&nbsp;{{breadcrumb.leaveThree}}</span>
      </div>
    </div>
    <template v-for="item in newList">
      <item :note="item.note" :type="noteStatus" :content="item"></item>
    </template>
    <div class="load-more-wrap flex">
      <img src="../../assets/svg/load-mord.svg" alt="" v-if="loadStatus">
      <button v-else @click="loadMore">加载更多</button>
    </div>
  </div>
</template>
<script>
  import item from '../../components/news/listItem.vue'
  import request from '../../../api/request'
  export default {
    name: 'kuaixun',
    components: {
      item
    },
    data () {
      return {
        noteStatus: true,
        newList: [],
        loadStatus: false,
        page: 1,
        pageSize: 30,
        resIndex: 0,
        noteArr: ['red', 'red', 'cyan', 'yellow'],
        id: 1
      }
    },
    computed: {
      breadcrumb () {
        return this.$store.state.news.breadcrumb
      }
    },
    watch: {
      $route () {
        this.id = parseInt(this.$route.params.id)
        this.loadStatus = true
        this.newList = []
        this.page = 1
        let data = {page: this.page, pageSize: this.pageSize, category_id: this.id}
        this.req(data)
      }
    },
    created () {
      this.id = parseInt(this.$route.params.id)
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        category_id: this.id
      }
      this.req(data)
    },
    methods: {
      loadMore () {
        this.loadStatus = true
        let data = {
          page: this.page,
          pageSize: this.pageSize,
          category_id: this.id
        }
        this.req(data)
      },
      req (data) {
        request.get('flashMsg', data).then((response) => {
          if (response.data.code === '200') {
            response.data.data.items.forEach((item) => {
              item.note = this.noteArr[this.resIndex]
              this.resIndex++
              if (this.resIndex > 3) {
                this.resIndex = 0
              }
              this.newList.push(item)
            })
            this.page++
            this.loadStatus = false
          }
        })
      }
    }
  }
</script>
